<!DOCTYPE html>
<html>
<head>
<!-- <link rel="shortcut icon" href="http://www.zszq.com/favicon.ico"> -->
<!-- <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网址之家</title>
<meta name="author" content="PING" />
<meta name="keywords" content="urlBox">
<meta name="description" content="urlData">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="format-detection" content="telephone=no">
<!-- 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sharer.js/0.2.16/sharer.min.js"></script>
 -->
<!-- 字体图片 fa-shower -->
<!-- <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">
/*body{background-color: #f1f1f1;}*/


* {
    font-family: core_sans_n45_regular,"Avenir Next","Helvetica Neue",Helvetica,Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi MicroHei",sans-serif;
}

body{
  background-color: #f6f6f6;
}
body,div, ul,li,a{
    /*outline: none;*/
    transition: all 0.30s ease-in-out;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
}
h1,ul,li{list-style-type: none;padding: 0; margin: 0;}
.container{background-color: #fff; max-width: 1300px;margin:0 auto;position: relative;}
h1{color: #fff; background-color: #45B6F7;text-align: center;padding:10px;font-size:1.8rem;/*text-shadow: 1px 1px 0 rgba(255,255,255,1), 1px 1px 2px rgba(0,0,0,.3);*/}
.container ul li{float: left;width: 100%;border: 3px solid #f0f5f3; margin-bottom: 1%;}
.container ul li a{ width: 10.3%; margin:0.5%;padding: 0.5%; font-size: 14px; text-align: center; background-color: #fff;float: left;background-color: #ccc;border:1px solid #f1f1f1;    border-radius: 5px;cursor: hand;overflow: hidden;}
.container ul li a:link {color: #45B6F7; text-decoration: none;} /* 未访问时的状态 */
.container ul li a:visited {color: #45B6F7; text-decoration: none;} /* 已访问过的状态 */
.container ul li a:hover {color: #FD8C84; text-decoration: underline;background-color: #757575;} /* 鼠标移动到链接上时的状态 */
.container ul li a:active {color: #45B6F7; text-decoration: none;} /* 鼠标按下去时的状态 */
.container ul li a img{width: 100%;}
/*
.container ul li a img:before { 
  content: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2304141900,2145702978&fm=23&gp=0.jpg');
  background-repeat:no-repeat;
  display: block;
  -moz-background-size:100%;
  background-size:100% ;
  background-color: #fff;
}
*/



@media (max-width:1200px){
.container ul li a{ width: 14.2%;}
}
@media (max-width:1100px){
.container ul li a{ width: 17%;}
}
@media (max-width:1000px){
.container ul li a{ width: 22%;}
}
@media (max-width:600px){
.container ul li a{ width: 28%;}
}
@media (max-width:400px){
.container ul li a{ width: 45%;}
}
@media (max-width:300px){
.container ul li a{ width: 90%;}
}
</style>
</head>
<body>
<div class="container">



      <ul id="neturl">
            <li v-for="item in netUrlList">
                  <i class="fa fa-cog"></i><h1 v-text="item.title"></h1>

                  <a v-bind:href="site.siteUrl"  target="_blank" v-for="site in item.sites" v-bind:title="site.siteName"><img v-bind:src="site.siteLogo" v-bind:alt="site.siteName">{{site.siteName}}</a>
            </li>
      </ul>
</div>
</body>
<!-- Vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.1/vue-resource.min.js"></script>
<!-- <script src="url2.js"></script> -->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script type="text/javascript">
var time = new Date().getTime();
//document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"{CSS_PATH}mz/themes.css?time="+time+"\"/>");
//document.write("<scr" + "ipt src='url.js?time="+time+"'></scr" + "ipt>");
console.log(time)
</script>
<script>

window.onload = function(){
  //现在时间-解决缓存
var oNowTime = new Date().getTime();
console.log(oNowTime);
// start
var vm = new Vue({
    el: '#neturl',
    data: {
        netUrlList: []
    },

    mounted: function() {
        this.$nextTick(function() {
            this.getNetUrlList();
        });
    },

    methods: {
        getNetUrlList: function() {
            var _this = this;
            this.$http.get("netUrl.json?time="+oNowTime).then(function(res) {
            //this.$http.get("http://oqxgojwyz.bkt.clouddn.com/netUrl.json?time="+oNowTime).then(function(res) {
                _this.netUrlList = res.body.result;
                console.log(_this.netUrlList);
                console.log(_this.netUrlList[0].sites[5].siteLogo);

            });
        }
    }
    
});
//end
};

</script>
</html>

